<template>
  <view class="sendExpressContainer">
    <!-- 搜索栏 -->
    <uni-search-bar @confirm="searchClick" v-model="searchValue" @clear="clearClick" class="searchBar"
      placeholder="请输入需要搜索的寄件信息">
    </uni-search-bar>
    <!-- 寄件信息栏 -->
    <view class="information">
      <view class="card" v-for="item in sendExpressData">
        <view class="cardLeft">
          <view class="main">寄件号：{{ item.sendId }}</view>
          <view class="main2 main">收件人：{{ item.sendToName }}</view>
          <view class="main2 main">寄件地址：{{ item.sendAddress }}</view>
          <uni-tag :text="item.sendStatus == '1'? '已寄出': '未寄出'" :type="item.sendStatus == '1'? 'success': 'warning'"
            :inverted="true" />
          <uni-tag :text="item.sendPay == '1'? '已支付': '未支付'" :type="item.sendPay== '1'? 'success':'error'"
            :inverted="true" />
        </view>
        <view class="cardRight">
          <button class="mini-btn" type="warn" size="mini" @click="deleteBtn(item)">删除</button>
        </view>
      </view>
    </view>
    <!-- 悬浮按钮 -->
    <uni-fab horizontal="right" vertical="bottom" :pattern="pattern" @fabClick="addSend"></uni-fab>
  </view>
</template>
<script>
  export default {
    data() {
      return {
        searchValue: '',
        sendExpressData: [],
        pattern: {
          backgroundColor: '#fe84b4',
          selectedColor: '#fe84b4',
          buttonColor: '#fe84b4',
          iconColor: '#fff'
        },
      }
    },
    onShow() {
      this.searchValue = '';
      this.sendExpressData = [];
      this.getSendData();
    },
    // 下拉刷新动作
    onPullDownRefresh() {
      this.searchValue = '';
      this.sendExpressData = [];
      this.getSendData();
      uni.stopPullDownRefresh();
    },
    methods: {
      clearClick() {
        this.searchValue = '';
        this.sendExpressData = [];
        this.getSendData();
      },
      searchClick() {
        this.sendExpressData = [];
        this.getSendData();
      },
      // 获取数据
      getSendData() {
        var _this = this;
        uni.showLoading({
          title: '加载中...'
        })
        this.$http.get('/api/send/getExpressData', {
          query: this.searchValue
        }).then((res) => {
          if (res.data.code == 200) {
            for (var i = 0; i < res.data.data.length; i++) {
              var item = res.data.data[i];
              _this.sendExpressData.push(item);
            }
          } else {
            uni.showToast({
              title: '服务器获取数据错误请稍后重试',
              icon: 'none',
              duration: 2000
            })
          }
          uni.hideLoading();
        });
      },
      // 点击新增按钮
      addSend() {
        uni.navigateTo({
          url: '/pages/function/send/AddSendExpress'
        })
      },
      deleteBtn(item) {
        console.log(item);
        var _this = this;
        uni.showModal({
          title: '提示',
          content: '确认删除该寄件单吗？',
          success: function(res) {
            if (res.confirm) {
              console.log('用户点击确定');
              _this.$http.delete('/api/send/deleteSendByUser?sendId=' + item.sendId).then((res) => {
                if(res.data.code == 200){
                  _this.sendExpressData = [];
                  _this.getSendData();
                  uni.showToast({
                    title: '删除寄件单成功',
                    duration: 2000, 
                  });
                }else {
                  uni.showToast({
                    title: '服务发生错误，请稍后删除',
                    icon: 'none',
                    duration: 2000
                  });
                }
              })
            } else if (res.cancel) {
              console.log('用户点击取消');
            }
          }
        });
      }
    }
  }
</script>

<style>
  .sendExpressContainer {
    height: 100%;
  }

  .information {
    height: 100%;
    padding: 50rpx;
    background-color: #f8f8f8;
    padding-top: 150rpx;
    padding-left: 30rpx;
    padding-right: 30rpx;
  }

  .searchBar {
    position: fixed;
    width: 100%;
    height: 120rpx;
    background-color: #ffffff;
    z-index: 999;
  }

  .information .card {
    height: 200rpx;
    width: 630rpx;
    display: flex;
    border-radius: 30rpx;
    margin-bottom: 30rpx;
    background-color: #fff;
    padding: 30rpx;
    box-shadow:
      0px 0px 3.7px rgba(0, 0, 0, 0.006),
      0px 0px 8.9px rgba(0, 0, 0, 0.008),
      0px 0px 16.8px rgba(0, 0, 0, 0.01),
      0px 0px 29.9px rgba(0, 0, 0, 0.012),
      0px 0px 56px rgba(0, 0, 0, 0.014),
      0px 0px 134px rgba(0, 0, 0, 0.02);
  }

  .information .card .cardLeft .main {
    font-weight: 1000;
    font-size: 15px;
    margin-bottom: 15rpx;
  }

  .information .card .cardLeft .main2 {
    font-weight: 500;
    font-size: 12px;
    color: #a3a3a3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 450rpx;
  }

  .information .card .cardLeft .uni-tag {
    margin-right: 10rpx;
  }

  .information .card .cardRight {
    display: flex;
    width: 200rpx;
    justify-content: center;
    align-items: center;
  }
</style>
